﻿<!DOCTYPE html>
<html>
<head>
  <title>DotNetify-Vue Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width" />
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />    
  <link href="app.css" rel="stylesheet" type="text/css">  
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1/dist/browser/signalr.min.js"></script>
  <script src="https://unpkg.com/dotnetify@latest/dist/dotnetify-vue.min.js"></script>
</head>
<body>
  <div id="App">
      <div>
        <h2>
          <img src="https://vuejs.org/images/logo.png" width="35px" />
          {{Greetings}}
        </h2>
        <p>Server time is: <span class="red-text">{{serverTime}}</span></p>
      </div>
      <div>
        <h2>Simple List</h2>
        <header>
          <input type="text" class="form-control" placeholder="First name" v-model="addFirstName">
          <input type="text" class="form-control" placeholder="Last name" v-model="addLastName">
          <button type="button" class="btn btn-primary" @click="add">Add</button>
        </header>
        <table>
           <tbody>
              <tr v-for="employee in Employees" 
                :key="employee.Id" 
                :class="{selected: selectedId == employee.Id}"
                @click="onSelectedEmployee(employee)"                 
              >
                 <td>{{employee.FirstName}}</td>
                 <td>{{employee.LastName}}</td>
              </tr>
           </tbody>
        </table>
        <footer>
           <input type="text" class="form-control" placeholder="First name" v-model="editFirstName">
           <input type="text" class="form-control" placeholder="Last name" v-model="editLastName">
           <button type="button" class="btn btn-primary" @click="onUpdate">Update</button>
           <button type="button" class="btn btn-primary" @click="onRemove">Remove</button>
        </footer>
    </div>
  </div>

  <script>
    new Vue({
        el: '#App',
        created: function () { this.vm = dotnetify.vue.connect("HelloWorldVM", this) },
        destroyed: function () { this.vm.$destroy() },
        data: { 
          Greetings: '', ServerTime: '', Employees: '', selectedId: '',
          addFirstName: '', addLastName: '', 
          editFirstName: '', editLastName: '' 
        },
        computed: {
          serverTime: function() { return this.ServerTime ? new Date(this.ServerTime).toLocaleString() : '' }
        },
        methods: {
          add: function () {
              let fullName = `${this.addFirstName} ${this.addLastName}`;
              if (fullName.trim() !== '') {
                this.vm.$dispatch({ Add: fullName });
                this.addFirstName = '';
                this.addLastName = '';
              }
          },
          onSelectedEmployee: function(employee) {
            this.selectedId = employee.Id;
            this.editFirstName = employee.FirstName;
            this.editLastName = employee.LastName;
          },
          onUpdate: function() {
              this.vm.$dispatch({ Update: { Id: this.selectedId, FirstName: this.editFirstName, LastName: this.editLastName } });
          },
          onRemove: function() {
              this.vm.$dispatch({ Remove: this.selectedId });
          }
        }
    })
  </script>
</body>
</html>